<template>
  <a-modal title-align="start" title="服务详情" :footer="false" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="900">
    <div class="title">
      <div style="font-size: 16px">
        <span></span>
        <span>{{ props.companyInfo.companyShortName }}</span>
      </div>
      <div>
        <a-space>
          <div
            ><span class="common-text">待接单数：</span> <span>{{ statics.waitAcceptNum || 0 }}</span></div
          >
          <div style="margin: 0 20px"
            ><span class="common-text">待执行数：</span> <span>{{ statics.waitScheduleNum || 0 }}</span></div
          >
          <div
            ><span class="common-text">执行中数：</span> <span>{{ statics.executingNum || 0 }}</span></div
          >
        </a-space>
      </div>
    </div>

    <a-descriptions class="mt10" :data="skuDescData" size="mini" bordered :labelStyle="{ textAlign: 'right', background: 'white' }" :column="2">
      <template #label="{ label }">
        <div>{{ label }}：</div>
      </template>
      <template #value="{ value, data }">
        <div v-if="data.label == '服务内容'">{{ props.serviceInfo.serContent }}</div>
        <div v-if="data.label == 'ID'">{{ props.serviceInfo.serShortId }}</div>
        <div v-if="data.label == '执行周期'">{{ props.serviceInfo.executeCycle }}天</div>
        <div v-if="data.label == '报价'">￥{{ props.serviceInfo.amtQuote }}/单</div>
        <div v-if="data.label == '交付内容'">{{ props.deliveryData(props.serviceInfo.taskNodeList) }}</div>
      </template>
    </a-descriptions>

    <div class="title-bar">服务描述</div>

    <a-scrollbar style="max-height: 400px; overflow: auto">
      <div v-html="props.serviceInfo.serDesc"></div>
    </a-scrollbar>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed, onMounted } from 'vue'

  const skuDescData = [
    { label: '服务内容', value: '' },
    { label: 'ID', value: '' },
    { label: '执行周期', value: '' },
    { label: '报价', value: '' },
    { label: '交付内容', value: '' },
  ]

  let props = defineProps(['modelValue', 'companyInfo', 'serviceInfo', 'statics', 'deliveryData'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  onMounted(() => {
    console.log(props)
  })
</script>

<style lang="less" scoped>
  .title {
    font-size: 12px;
    border: 1px solid #e5e6eb;
    padding: 5px 10px;
    border-radius: 3px;
  }
</style>
